<template>
  <div class="check-wrap">
    <el-card
      class="pwdinput-card text-center"
      v-if="setting?.passwordWriteStatus"
    >
      <template #header>
        <div class="clearfix input-title">
          <span>{{ $t("rform.enterCheck.enterPwd") }}</span>
        </div>
      </template>
      <div class="mt20">
        <el-input
          v-model.trim="writePassword"
          :placeholder="$t('rform.enterCheck.enterPwd')"
        />
        <el-button
          class="width50 mt30"
          type="primary"
          @click="handleCheckWritePwd"
        >
          {{ $t("common.confirm") }}
        </el-button>
      </div>
    </el-card>
    <el-card
      class="pwdinput-card text-center"
      v-if="setting?.enableWhiteList"
    >
      <template #header>
        <div class="clearfix">
          <div v-html="setting?.whiteListTips" />
        </div>
      </template>
      <el-input v-model.trim="writePassword" />
      <el-button
        class="width50 mt20"
        type="primary"
        @click="handleCheckWhiteList"
      >
        {{ $t("common.confirm") }}
      </el-button>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { checkWritePwdRequest } from "@/api/project/setting";
import { checkAnswerWhitelist } from "@/api/project/answerWhiteList";
import { useUserFormInject } from "@/views/formgen/components/GenerateForm/hooks/useUserFormInject";

const props = defineProps<{
  formKey: string;
  setting: any;
}>();

const writePassword = ref<string>("");

const emit = defineEmits(["enter"]);

const handleCheckWritePwd = () => {
  checkWritePwdRequest({
    formKey: props.formKey,
    password: writePassword.value
  }).then(() => {
    emit("enter");
  });
};

const userFormStore = useUserFormInject();

const { setWhilteListVal } = userFormStore;

const handleCheckWhiteList = () => {
  checkAnswerWhitelist({
    formKey: props.formKey,
    type: props.setting?.whiteListType,
    value: writePassword.value as string
  }).then(() => {
    setWhilteListVal(writePassword.value);
    emit("enter");
  });
};
</script>

<style scoped lang="scss">
.check-wrap {
  height: 100vh;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  .el-card {
    width: 400px !important;
    border-radius: 15px;
    height: 30%;
  }
}

.input-title {
  font-size: 18px;
  font-weight: 600;
}

@media screen and (max-width: 768px) {
  .check-wrap {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    .el-card {
      width: 90% !important;
    }
  }
}
</style>
